import React from 'react';
import './Pagination.less';
import { Row, Col, } from 'antd';

export default class Pagination extends React.Component {
    constructor() {
        super();
        this.state = {
            showLinkNum: 5 //max count
        }
    }
    componentDidMount() {
        const pageIndex = 1;
        const pageNum = (this.props.total % this.props.size) === 0 ? this.props.total / this.props.size : parseInt(this.props.total / this.props.size + 1, 0);
        this.setState(Object.assign({},
            this.props,
            { pageIndex: pageIndex, pageNum: pageNum }));
    }
    //page navigate event
    pageIndexChange(event) {
        let target = event.target;
        if (target.parentNode.className === 'disabled') {
            return;
        }
        let index = "";
        let pageIndex = target.value;
        let type = target.getAttribute("data-type");
        if (type != null && type.indexOf("link") >= 0) {
            index = event.target.innerHTML;
            if (!isNaN(index)) {
                pageIndex = index;
            }
            switch (type) {
                case "link-firstindex":
                    pageIndex = 1;
                    break;
                case "link-lastindex":
                    pageIndex = this.state.pageNum;
                    break;
                case "link-last":
                    pageIndex = parseInt(this.state.pageIndex, 0) + 1;
                    break;
                case "link-first":
                    pageIndex = parseInt(this.state.pageIndex, 0) - 1;
                    break;
                case "link-lastindexpoint":
                case "link-firstindexpoint":
                    return;
                default: return;
            }
            this.state.pageIndexChange((pageIndex - 1) * this.state.size, pageIndex);
        }
        else {
            return;
        }
        this.setState({ pageIndex: pageIndex })
    }
    build_item(key, value, classname_li, classname, link) {
        return <li className={classname_li} key={key}>
            <a className={classname} href="javascript:;" data-type={"link-" + key}>{value}</a>
        </li>
    }

    render() {
        let TAG_FIRSTINDEX = "firstindex";
        let TAG_FIRSTINDEX_POINT = "firstindexpoint";
        let TAG_LASTINDEX = "lastindex";
        let TAG_LASTINDEX_POINT = "lastindexpoint";

        let CLASSNAME_ACTION = "a-action";
        let CLASSNAME_POINT = "a-point";


        let current_PageIndex = this.state.pageIndex;
        let total_PageNum = this.state.pageNum;
        let show_PageNum = this.state.showLinkNum;

        let arrFirst = [];
        let arrLast = [];
        let arrLinkShow = [];

        let style_prevDisplay = 1 === current_PageIndex ? 'disabled' : '';
        let style_lastDisplay = this.state.pageNum === current_PageIndex ? 'disabled' : '';

        let startIndex = (Math.ceil(current_PageIndex / show_PageNum) - 1) * show_PageNum + 1;
        let endIndex = Math.min(startIndex + show_PageNum, (total_PageNum + 1));

        for (let i = startIndex; i < endIndex; i++) {
            if (i === startIndex && startIndex >= show_PageNum) {
                arrLinkShow.push(
                    this.build_item(TAG_FIRSTINDEX, 1, '', 1 === current_PageIndex ? CLASSNAME_ACTION : '')
                );
                arrLinkShow.push(
                    this.build_item(TAG_FIRSTINDEX_POINT, "···", '', CLASSNAME_POINT)
                );
            }

            let currentIndexDisplay = i === current_PageIndex ? CLASSNAME_ACTION : '';
            arrLinkShow.push(
                this.build_item(i, i, '', currentIndexDisplay, "javascript:;")
            );

            if (endIndex - 1 !== this.state.pageNum && i === endIndex - 1) {
                arrLinkShow.push(
                    this.build_item(TAG_LASTINDEX_POINT, "···", '', CLASSNAME_POINT)
                );
                arrLinkShow.push(
                    this.build_item(TAG_LASTINDEX, total_PageNum, '', total_PageNum === current_PageIndex ? CLASSNAME_ACTION : '')
                );
            }
        }
        arrFirst.push(
            this.build_item("first", "<", style_prevDisplay, 'a-arrow')
        );

        arrLast.push(
            this.build_item("last", ">", style_lastDisplay, 'a-arrow')
        );
        return (
            <div className="div-pagination">
                <Row className="row-pagination">
                    <Col span={24}>
                        <div>
                            <nav className="nav-pagination" key="page">
                                <ul key='page-ul' className="pagination" onClick={this.pageIndexChange.bind(this)}>
                                    {arrFirst}
                                    {arrLinkShow}
                                    {arrLast}
                                </ul>
                            </nav>
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }
}